<script setup>
// import splitpane, { ContextProps } from "@/components/ReSplitPane";
import {reactive} from "vue";
import {Splitpanes, Pane} from 'splitpanes'
import 'splitpanes/dist/splitpanes.css'

defineOptions({
  name: "SplitPane"
});

// const settingLR: ContextProps = reactive({
//   minPercent: 20,
//   defaultPercent: 40,
//   split: "vertical"
// });
//
// const settingTB: ContextProps = reactive({
//   minPercent: 20,
//   defaultPercent: 40,
//   split: "horizontal"
// });
</script>

<template>
  <el-card shadow="never">
    <template #header>
      <div class="card-header">
        <p class="font-medium">切割面板</p>
      </div>
    </template>
    <div class="split-pane">
      <splitpanes style="height:100%">
        <pane min-size="20">1</pane>
        <pane min-size="30">
          <splitpanes horizontal>
            <pane>2</pane>
            <pane>3</pane>
            <pane>4</pane>
          </splitpanes>
        </pane>
        <pane>5</pane>
      </splitpanes>
    </div>
  </el-card>
</template>

<style lang="scss" scoped>
.split-pane {
  width: 100%;
  height: calc(100vh - 200px);
  font-size: 50px;
  text-align: center;
  border: 1px solid #e5e6eb;

  .splitpanes {
    background: linear-gradient(-45deg, #EE7752, #E73C7E, #23A6D5, #23D5AB);
  }

  .splitpanes__pane {
    box-shadow: 0 0 5px rgba(0, 0, 0, .2) inset;
    justify-content: center;
    align-items: center;
    display: flex;
  }

  :deep(.splitpanes--vertical > .splitpanes__splitter) {
    min-width: 6px;
    background: linear-gradient(90deg, #ccc, #111);
  }

  :deep(.splitpanes--horizontal > .splitpanes__splitter) {
    min-height: 6px;
    background: linear-gradient(0deg, #ccc, #111);
  }
}
</style>